<template>
  <div class="order-operate-wrapper">
    <div class="order-operate">
      <div class="title">
        <div class="left">
          <span class="icon">
            <i class="iconfont icontips_tishi"></i>
          </span>
        </div>
        <div class="center">
          <slot></slot>
        </div>
        <div class="right" @click="closePopup">
          <span class="icon">
            <i class="iconfont iconty_guanbi"></i>
          </span>
        </div>
      </div>
      <div class="content">
        <div class="content-title">
            <p>
              <span>{{getLotteryType.lotteryName}}</span>
              <span>-</span>
              <span>{{getCurrentMainTab.mainTabName}}{{getCurrentTab.subTabName}}</span>
            </p>
            <p>
              <span>第</span>
              <span>{{getLotteryDateNo}}</span>
              <span>期</span>
            </p>
        </div>
        <div class="set-money border-bottom">
          <input type="text" :value="getTotalAmount" readonly class="amount-display">
          <unit-setter></unit-setter>
        </div>
        <transition name="fade">
          <div class="fixed-amount border-bottom" v-show="!getShowMoneyInput">
            <div 
              class="item button-unselected" 
              :class="activeChoumaIndex == index ? 'active' : ''"
              v-for="(item, index) in fixedAmount" 
              @click="useFixedAmount(item.amount, index)"
              :key="item.id">
              <span class="icon" v-show="item.icon">
                <i class="iconfont"></i>
              </span>
              <p class="number">
                {{item.amount}}
              </p>
            </div>
          </div>
        </transition>
        <div class="set-refund border-bottom">
          <refund-rate-switch></refund-rate-switch>
        </div>
        <div class="account-info">
          <div class="remaining-money">
            <span>可用余额</span>
            <span>18888</span>
          </div>
          <div class="put-money">
            <span class="icon">
              <i class="iconfont icongd_chongzhi"></i>
            </span>
            <span class="text">充值</span>
          </div>
        </div>
      </div>
      <slot name="buying-notice"></slot>
      <div class="bottom">
        <div class="order-info">
          共
          <span>{{getBuyingQuantity}}</span>
          注，合计
          <span>{{getTotalAmount}}</span>
          <span>{{unitText}}</span>
        </div>
        <slot name="buttons"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import NumberInputPhone from '@/components/base/phone/number-input-phone/number-input-phone'
import UnitSetter from '@/components/base/unit-setter/unit-setter'
import RefundRateSwitch from '@/components/base/refund-rate-switch/refund-rate-switch'

import { mapGetters, mapMutations } from 'vuex'
export default {
  
  components: {
    NumberInputPhone,
    UnitSetter,
    RefundRateSwitch
  },
  props: {
    fixedAmount: {
      type: Array, 
      default: function() {
        return [
          {
            id: 1,
            amount: 10,
            icon: ''
          },
          {
            id: 2,
            amount: 20,
            icon: ''
          },
          {
            id: 3,
            amount: 50,
            icon: ''
          },
          {
            id: 4,
            amount: 100,
            icon: ''
          },
          {
            id: 5,
            amount: 120,
            icon: ''
          },
          {
            id: 6,
            amount: 31,
            icon: ''
          },
          {
            id: 7,
            amount: 18,
            icon: ''
          },
          {
            id: 8,
            amount: 2,
            icon: ''
          },
          {
            id: 9,
            amount: 300,
            icon: ''
          },
          {
            id: 10,
            amount: 500,
            icon: ''
          },
        ]
      }
    }
  },
  data() {
    return {
      activeChoumaIndex: -1
    }
  },
  methods: {
    closePopup() {
      this.$emit('click', false)
    },
    useFixedAmount(number, index) {
      this.activeChoumaIndex = index
      // this.setSingleAmount(number)
      this.setTotalAmount(number)
    },
    updateInputValue(value) {
    Number(e.target.value.replace(/\D/g,''))
    },
    ...mapMutations('lottery', {
      setUnitPrice: 'SET_UNIT_PRICE',
      setSingleAmount: 'SET_SINGLE_AMOUNT',
      setTotalAmount: 'SET_TOTAL_AMOUNT'
    })
  },
  computed: {
    ...mapGetters('lottery', [
      'getUnitPrice', 
      'getUnitRate', 
      'getLotteryType',
      'getLotteryDateNo',
      'getCurrentMainTab',
      'getCurrentTab',
      'getBuyingQuantity',
      'getSingleAmount',
      'getShowMoneyInput',
      'getTotalAmount'
    ]),
    unitText() {
      return this.getUnitRate == 1 
        ? '元' 
        : this.getUnitRate == 0.1 
        ? '角'
        : this.getUnitRate == 0.01
        ? '分'
        : '厘'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
  .set-money >>> .price-input 
    width 140px
    height 36px
    background $input-background-color !important
    box-shadow none
  .order-operate-wrapper
    .order-operate
      height 440px
      width 100px
      background-color #fff
      position absolute
      width 320px
      top 50%
      left 50%
      transform translate(-50%, -50%)
      border-radius 6px
      .title 
        display flex 
        font-size 100
        align-items center
        height 48px 
        background-color $color-theme-dark
        box-sizing border-box 
        padding 0 10px
        justify-content space-between
        border-top-left-radius 6px 
        border-top-right-radius 6px
        .left 
          .icon 
            width 20px
            height 20px 
            display flex 
            extend-click()
            .iconfont 
              color #fff 
              font-size 20px
        .center 
          color #fff
        .right 
          .icon
            width 20px
            height 20px
            color $color-theme-red
            display flex 
            align-items center
            extend-click()
            .iconfont 
              font-size 22px
      .content
        box-sizing border-box 
        padding 0 10px 
        .content-title
          display flex 
          flex-direction column 
          justify-content center
          height 60px
          p 
            text-align center
            line-height 1.3
        .set-money 
          display flex   
          justify-content space-between
          padding-bottom 10px 
          .amount-display 
            width 140px
            height 36px 
            border-radius 3px 
            outline-style none
            background $input-background-color
            border 1px solid $color-divide-line
            text-align center
        .fixed-amount 
          display flex 
          flex-wrap wrap
          justify-content space-between
          margin-top 10px
          &.fade-enter-active, &.fade-leave-active 
            tansition opacity 0.2s
          &.fade-enter, &.fade-leave-to 
            opacity 0
          .item
            width 54px 
            height 40px
            box-sizing border-box 
            text-align center
            margin-bottom 10px
            display flex
            flex-direction column
            justify-content center
            align-items center
            .icon 
              width 27px
              height 20px
              display inline-block
              border 1px solid red
        .set-refund 
          padding 15px 0
        .account-info 
          display flex
          align-items center
          justify-content space-between
          height 45px
          .put-money 
            display flex 
            align-items center
            .icon 
              margin-right 10px
              .iconfont 
                font-size 20px
      .bottom
        height 70px
        position absolute 
        bottom 10px 
        right 10px 
        left 10px
        text-align center 
        .btns 
          font-size 0
          position absolute 
          bottom 0
          right 0
          left 0
          .btn 
            font-size 14px
            width 98px
            height 36px
            &:first-child 
              margin-right 10px
</style>              